import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"

import { useAtom } from "jotai"
import { SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useAuth } from "@/features/useAuth"
import Image, { ImageComponent } from "@/components/base/Image"
import Svg, { SvgComponent } from "@/components/base/Svg"
import { Repository } from "@/atoms/api_repositories"
import { toast } from "react-toastify"

const EmailIcon = <Image src="pages/AccountPage/item/email.webp" />
const PhoneIcon = <Image src="pages/AccountPage/item/phone.webp" />
const Lock = <Svg src="pages/AccountPage/item/lock.svg" />

const Root = styled.div`
    width: 100%;
    height: 242rem;
    background:
        linear-gradient(180deg, #ff69ab 0%, #fff3f9 75%, #fff3f9 100%),
        radial-gradient(
            174.04% 87.02% at 0% 0%,
            rgba(252, 33, 106, 0.4) 0%,
            rgba(252, 33, 106, 0) 100%
        );
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    padding: 16rem 16rem 0 16rem;
    position: relative;
`

const ModelRoot = styled.div`
    width: 100%;
    height: 288rem;
    display: flex;
    flex-direction: column;
`
const HintImage = styled(ImageComponent("pages/AccountPage/mask.webp"))`
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const Title = styled.div`
    width: 100%;
    font-family: Gilroy;
    font-weight: 500;
    font-size: 18rem;
    line-height: 24rem;
    letter-spacing: 0%;
    color: #f9f9fa;
`
const Tips = styled.div`
    font-family: Gilroy;
    font-weight: 400;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0%;
    color: #ffffffbf;
    margin-top: 4rem;
    margin-bottom: 16rem;
`

const ListItem = styled.div`
    height: 56rem;
    background: #ffffff;
    display: flex;
    padding-left: 16rem;
    padding-right: 12rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rem;
    margin-bottom: 12rem;
    text-decoration: none;
    color: #272e3b;
    z-index: 2;
`
const LeftBox = styled.div`
    display: flex;
`
const Icon = styled.div`
    width: 24rem;
    height: 24rem;
    margin-right: 16rem;

    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const ItemText = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0%;
`
const ArrowIcon = styled(SvgComponent("pages/AccountPage/line_arrow.svg"))`
    width: 24rem;
    height: 24rem;
`

interface ColumnProps {
    key: string
    title: string
    icon: React.ReactNode
    onClick?: () => void
}

const ResetPassword = () => {
    const navigate = useNavigate()
    const [verifyData] = useAtom(verifyAtom)
    const [, setVerifyData] = useAtom(SetVerifyAtom)
    // 目前不支持邮件验证码重置密码功能
    // const sendSmsByEmail = () => {
    //     console.log("发送邮件")
    //     // 发送邮件
    //     // 跳转到验证页面
    //     setVerifyData({
    //         ...verifyData,
    //         otpId: "12222",
    //         type: "edit",
    //         field: "password",
    //         verifyMethod: "email",
    //     })
    //     navigate("/s-account/form/verify")
    // }
    const { data: userInfo } = Repository.useRefGetProfile()
    const { sendVerifyCode } = useAuth()
    const sendSmsByPhone = async () => {
        console.log("发送短信")
        // 发送短信
        if (!userInfo?.phone) {
            toast("Phone number is not available.")
            return
        }
        const res = await sendVerifyCode(userInfo.phone)
        if (res) {
            setVerifyData({
                ...verifyData,
                otpId: res.data?.id,
                type: "edit",
                field: "password",
                verifyMethod: "phone",
            })
            // 跳转到验证页面

            setTimeout(() => {
                navigate("/s-account/form/verify")
            }, 500)
        } else {
            toast("failed to send sms!")
        }
    }

    const verifyByPassword = () => {
        setVerifyData({
            ...verifyData,
            otpId: "12222",
            type: "edit",
            field: "password",
        })
        navigate("/s-account/form/verifypassword")
    }

    const columns: ColumnProps[] = [
        // {
        //     key: "email",
        //     title: "Email verification",
        //     icon: EmailIcon,
        //     onClick: sendSmsByEmail,
        // },
        {
            key: "phone",
            title: "Phone verification",
            icon: PhoneIcon,
            onClick: sendSmsByPhone,
        },
        {
            key: "oldPassword",
            title: "Old Password Verification",
            icon: Lock,
            onClick: verifyByPassword,
        },
    ]

    return (
        <Root>
            <HintImage />
            <ModelRoot>
                <Title>Reset Password</Title>
                <Tips>Choose a way to verify your identity</Tips>

                {columns.map((item, index) => {
                    return (
                        <ListItem
                            key={item.key}
                            onClick={item.onClick}
                        >
                            <LeftBox>
                                <Icon>{item.icon}</Icon>
                                <ItemText>{item.title}</ItemText>
                            </LeftBox>
                            <ArrowIcon />
                        </ListItem>
                    )
                })}
            </ModelRoot>
        </Root>
    )
}
export default ResetPassword
